<template>
  <div id="up1">
    <h2>放蜡柱机</h2>
    <!-- <el-date-picker
      clearable
      v-model="yzjTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择测试时间"
      style="margin-left: 20px"
    >
    </el-date-picker> -->
    <!-- <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="handleQuery"
      style="margin-left: 20px"
      >搜索</el-button
    > -->
    <div class="app-container1" style="margin-top: -50px">
      <h1>关键数据</h1>
      <el-table
        vv-loading="loading"
        :data="tableData"
        border
        :cell-style="color1"
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
      >
        <!-- <el-table-column
          label="生产数量(个)"
          align="center"
          prop="consumptionAll"
        /> -->
        <el-table-column label="当前电流(A)" align="center" prop="i" />
        <el-table-column label="当前电压(V)" align="center" prop="v" />
        <el-table-column
          label="当前功耗(W)"
          align="center"
          prop="consumptionNow"
        />
        <el-table-column
          label="总能耗(KWH)"
          align="center"
          prop="consumptionAll"
        />
        <el-table-column label="运行状态" align="center" prop="state" />
      </el-table>
    </div>
    <el-date-picker
      clearable
      v-model="yzjTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择测试时间"
      style="margin-left: 30px"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="handleQuery"
      style="margin-left: 20px"
      >搜索</el-button
    >
    <div class="proCharts" ref="echarts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { yzjLine, yzjgetData } from "@/api/system/zdsx.js";
import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      yzjTime: "",
      list: {
        name: "anuo",
        title: "Mr Olympia",
      },
    };
  },
  created() {
    this.yzjgetDataFn();
  },
  mounted() {
    this.getOilList();
    let a = { name: "lee" };
    let b = { age: 18 };
    Object.defineProperty(b, "name", {
      value: a.name,
    });
    console.log(a, b, 222);
  },
  methods: {
    yzjgetDataFn() {
      yzjgetData().then((res) => {
        console.log(res.data);
        this.tableData = res.data;
      });
    },
    getOilList() {
      this.loading = true;
      yzjLine(this.yzjTime).then((res) => {
        const option = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["一号电流", "一号电压", "二号电流", "二号电压"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "一号电流",
              data: res.data[0][0],
              type: "line",
            },
            {
              name: "一号电压",
              data: res.data[0][2],
              type: "line",
            },
            {
              name: "二号电流",
              data: res.data[1][0],
              type: "line",
            },
            {
              name: "二号电压",
              data: res.data[1][2],
              type: "line",
            },
          ],
        };
        const E = echarts.init(this.$refs.echarts);
        E.setOption(option);
      });
    },
    handleQuery() {
      this.getOilList();
      // console.log(1111111)
    },
  },
};
</script>

<style>
.proCharts {
  width: 100%;
  height: 600px;
  /* margin-top: -300px; */
}
h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
</style>
